<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#qq{
				width: 1000px;
				background-color: rgba(88,88,88,0.5);
			}
			img,ul{
				vertical-align: middle;
			}
			ul{
				display: inline;
				padding-left: 20px;
				margin-top: 10px;
			}
			li{
				font-size: 20px;
				padding-left: 25px;
				display: inline-block;
			}
			div #d1{
				background-color: white;
				width: 300px;
				height: 300px;
				border: 1px solid chartreuse;
				position: absolute;
				top: 50px;
				right: 900px;
				z-index: 4;
			}
			div .q1{
				border-bottom-style: solid;
				padding: 20px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<header>
			<div id="qq">
				<img src="img/logo.gif" width="100px">
				<ul>
					<li>购物车</li>
					<li>优惠券</li>
					<li>快速注卡</li>
					<li>各地购课</li>
					<li>手机报</li>
					<li>网站导航<img src="img/open_icon.gif" width="20px" height="20px"></li>
				</ul>
			</div>
			<div>
				<div id="d1">
			<div class="q1">托福 雅思 考研 职称英语 初中 日语 </div>
			<div class="q1">网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</div>
			<div class="q1" style="border: none;">M-Zone 手机报 时时英语</div>

				</div>
			</div>
		</header>
	</body>
</html>
